<template>
  <div id="my">
    <flexbox class="flex-content">
      <flexbox-item>
        <div class="flex-top">茂鑫</div>
        <p>何茂鑫
          <i class="iconfont icon-yonghu"></i>
        </p>
      </flexbox-item>
    </flexbox>
    <group>
      <cell link="/main/mymanger" :title="mangerName" is-link>
        <i slot="icon" class="iconfont icon-huiyishiguanli content-icon"></i>
      </cell>
      <cell link="/" :title="out" is-link>
        <i slot="icon" class="iconfont icon-zhuxiao1 content-icon"></i>
      </cell>
    </group>
  </div>
</template>

<style lang='less'>
  #my {
    .flex-top {
      text-align: center;
      color: white;
      border: 2px solid white;
      width: 2.5rem;
      height: 2.5rem;
      line-height: 2.5rem;
      border-radius: 1.5rem;
      background-color: #79cc70;
      margin: 0px auto;
    }
    .flex-content {
      height: 8.5rem;
      height: 6.5rem;
      background-image: url(../../assets/img/mine-bg.png);
      background-size: cover;
      p {
        margin-top: 0.4rem;
        color: #52627e;
        text-align: center;
      }
    }
    .content {
      text-align: center;
      img {
        margin: 0px auto;
      }
    }
    .iconfont {
      margin-left: 0.2rem;
    }
    .content-icon {
      color: #00d7c7;
      margin-right: 0.4rem;
    }
    .font-color {
      color: #52627e;
    }
  }
</style>

<script>
  import { Flexbox, FlexboxItem, Cell, Group } from "vux";

  export default {
    name: "Login",
    components: {
      Flexbox,
      FlexboxItem,
      Cell,
      Group
    },
    data() {
      return {
        mangerName: "管理会议室",
        setSystem: "设置",
        out: "注销"
      };
    },
    methods: {
      onSubmit() {
        this.$router.push({
          name: "Child"
        });
      }
    }
  };
</script>
